<template>
  <view class="pad_10 whe_maxv boxs xd">
    <view class="wh_9 jz">
      <img class="wh_max" src="../../static/img/shlf.png" style="max-height: 30px"  mode="widthFix" alt=""/>
    </view>
    <!--      滚动通知-->
    <view v-if="false" class="wh_f" style="padding:5px 5px 10px">
      <view class="wz_jz centerdq" style="width: 30px">
        <image class="centerdq" src="../../static/icon/lb_1.png" style="width: 23px;height: 23px" />
      </view>
      <view class="flex_1 ccsl_1 centerdq scroll-container"
            style="height: 23px; overflow: hidden;">
        <view class="centerdq scroll-text" style="color:#ff9a2e;">
          <text>每天中午12点前下单当日达!</text>
          <text class="mag_l-30">每天18:30之后的订单次日到店自取!</text>
        </view>
      </view>
    </view>
    <img class="jd" style="width: 100%;left: 0;top: 0;z-index:-1" src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/29/xcx_1756433761_cN2z6kJgPz.png" alt="">
    <view v-if="false" class="pad_10 bor_10" style="background-color: #e73a47">
      <view class="wz_white pad_b_10 xd">
        <text class="fz_18 centerdq">订阅专享</text>
        <text class="fz_12 mag_l-5 centerdq">订阅后方可享受此次活动哦!</text>
        <view @click="xxdy" class="ljdy jd jz_flex" style="top: -13px;right: 2px;width: 100px;height: 40px">
          立即订阅
        </view>
      </view>
      <view class="pad_10 bor_10 wh_f_r ba_white">
        <view style="width: 40%">
          <view class="img_zfx">
            <img src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/28/xcx_1756345712_4FMTuRB80D.png" alt="">
          </view>
        </view>
        <view style="padding: 0 0 0 10px">
          <view class="fz_16 em">900g宝粒王鸡蛋挂面</view>
          <view class="wh_f_l wz_zhui fz_14 pad_5_0">
            <view>提货时间: 08-31</view>
            <view>周日下午</view>
          </view>
          <view class=" fz_14">900g</view>
          <view class="wh_f_l fz_14 pad_t-10">
            <view class="wz_red">已团4567</view>
            <view class="wz_zhui">
              <text class="centerdq">分享</text>
              <img class="centerdq mag_l-5" src="../../static/icon/fx.png" style="width: 15px;height: 15px"/>
            </view>
          </view>
          <view class="wh_f_l mag_t-15" >
            <view>
              <view class="flex_1 wz_red">
                <text class="">¥</text>
                <text class="fz_16 em">{{ parseInt(147.00) }}</text>
                <text class="fz_10 em ">.{{ String(147.00).split('.')[1] }}</text>
              </view>
            </view>
            <view>
              <text class="bor_25 wz_white fz_14" style="padding: 6px 10px;background-color: #e63946">团购</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="false" class="pad_10 bor_10 mag_t-10" style="background-color: #e73a47">
      <view class="wz_white pad_b_10">
        <text class="fz_20 centerdq">爆款热卖</text>
        <text class="fz_12 mag_l-5 centerdq">热销速抢</text>
      </view>
      <view class="pad_10 bor_10 wh_f_r ba_white">
        <view style="width: 40%">
          <view class="img_zfx">
            <img src="https://xdjzapi.towngo.cn/uploads/images/wx/202508/28/xcx_1756345712_4FMTuRB80D.png" alt="">
          </view>
        </view>
        <view style="padding: 0 0 0 10px">
          <view class="fz_16 em">900g宝粒王鸡蛋挂面</view>
          <view class="wh_f_l wz_zhui fz_14 pad_5_0">
            <view>提货时间: 08-31</view>
            <view>周日下午</view>
          </view>
          <view class=" fz_14">900g</view>
          <view class="wh_f_l fz_14 pad_t-10">
            <view class="wz_red">已团4567</view>
            <view v-if="false" class="wz_zhui">
              <text class="centerdq">分享</text>
              <img class="centerdq mag_l-5" src="../../static/icon/fx.png" style="width: 15px;height: 15px"/>
            </view>
          </view>
          <view class="wh_f_l mag_t-15" >
            <view>
              <view class="flex_1 wz_red">
                <text class="">¥</text>
                <text class="fz_16 em">{{ parseInt(147.00) }}</text>
                <text class="fz_10 em ">.{{ String(147.00).split('.')[1] }}</text>
              </view>
            </view>
            <view>
              <text class="bor_25 wz_white fz_14" style="padding: 6px 10px;background-color: #e63946">团购</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--    tabs-->
    <view class="wh_f wz_jz pad_10_0 wz_hui mag_t-50">
      <view class="flex_1 em" v-for="(item,index) in tabs" :key="index">
        <view class="fz_16 ">
          <view @click="addTabs(item.id)" :class="tabsIndex == item.id?'tg_1':''" class="disp"  style="padding: 3px 12px">
            {{ item.name }}
          </view>
        </view>
        <view @click="addTabs(item.id)" :class="tabsIndex == item.id?'tg_2':''" class="fz_12 disp mag_t-5" style="padding: 2px 10px">
          {{ item.remark }}</view>
      </view>
    </view>

    <view v-if="list.length<1" class="jz_flex" style="height: 60%">
      <view class="wz_jz">
        <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
        <view class="mag_t-20">快去加购商品吧!</view>
      </view>
    </view>

    <view v-if="list.length>0" class="pad_10 bor_10 mag_t-10" style="background-color: #e73a47">
      <view class="wz_white">
        <text class="fz_20 centerdq">爆款热卖</text>
        <text class="fz_12 mag_l-5 centerdq">热销速抢</text>
      </view>
      <view  @click="addDetail(item)" class="pad_10 bor_10 wh_f_r ba_white xyy mag_t-10" v-for="(item,index) in list" :key="index">
      <view style="width: 40%">
        <view class="img_zfx">
          <img :src="item.goods_info.image[0]" alt="">
        </view>
      </view>
      <view style="padding: 0 0 0 10px">
        <view class="fz_16 em">{{ item.goods_info.name }}</view>
        <view v-if="false" class="wh_f_l wz_zhui fz_14 pad_5_0">
          <view>提货时间: 08-31</view>
          <view>周日下午</view>
        </view>
        <!--        <view class=" fz_14 pad_t-10">规格: {{ item.goods_info.specs }}</view>-->
        <view class="wz_hui fz_12 pad_t-10 pad_t-5">截止时间: {{item.end_date}}</view>
        <view class="wz_hui fz_12 pad_t-10 pad_t-5">提货时间: {{item.delivery_date}}</view>
        <view class="wh_f_l fz_14 pad_t-5">
          <view class="wz_red">已团 {{ item.stock - item.last_stock }}</view>
          <view class="">库存 {{ item.last_stock }}</view>
          <view v-if="false" @click.stop="onShareAppMessage(item)" class="wz_zhui">
            <text class="centerdq">分享</text>
            <img class="centerdq mag_l-5" src="../../static/icon/fx.png" style="width: 15px;height: 15px"/>
          </view>
        </view>
        <view class="pad_t-5">
          <up-line-progress activeColor="#f82251" inactiveColor="#ffdfde" :percentage="(item.last_stock/item.stock)*100"
                            height="14" :showText="false"></up-line-progress>
        </view>
        <view class="wh_f_l mag_t-15" >
          <view>
            <view class="flex_1 wz_red">
              <text class="">¥</text>
              <text class="fz_16 em">{{ parseInt(item.goods_info.discount_price) }}</text>
              <text class="fz_10 em ">.{{ String(item.goods_info.discount_price).split('.')[1] }}</text>
            </view>
          </view>
          <view>
            <text v-if="item.last_stock != 0" @click.stop="addKillShow(item)" class="bor_25 wz_white fz_14" style="padding: 6px 12px;background-color: #e63946">团购</text>
            <text v-if="item.last_stock == 0" class="bor_25 wz_hui fz_14" style="padding: 6px 12px;background-color: #d2d0d2">团购</text>
          </view>
        </view>
      </view>
    </view>
    </view>


    <up-popup
        :mask-closable="true"
        @close="close"
        @open="open"
        customStyle="border-radius: 20px 20px 0 0"
        :show="show"
        mode="bottom">
      <view>
        <view class="wh_f_r" style="background-color: #f5f5f5;border-radius: 20px 20px 0 0;padding:20px">
          <view style="width: 100px;">
            <view class="img_zfx">
              <img :src="additem?.goods_info?.image[0]"/>
            </view>
          </view>
          <view class="pad_l-20">
            <view class="wh_f_l">
              <view>{{ additem?.goods_info?.name }}</view>
              <view>
                <up-icon @click="close" name="close" color="#383838" size="20"></up-icon>
              </view>
            </view>
            <view class="pad_10_0 fz_12">{{ additem?.category_pstr }}</view>
            <view>
              <text class="wz_red ">¥{{ additem?.act_price }}</text>
              <text class="fz_12"> / {{ additem?.goods_info?.specs }}</text>
            </view>
          </view>
        </view>
        <view style="padding: 20px">
          <view class="wh_f_l">
            <view class="fz_14">购买数量</view>
            <view>
              <up-number-box class="centerdq" button-size="26" buttonWidth="26"
                             @change="valChange($event,additem)"
                             v-model="additem.amount"
                             :min="1"></up-number-box>
            </view>
          </view>
          <view style="padding-top: 20px">
            <view @click="killShop" class="bor_25 pad_10 wz_jz fz_14 wz_white" style="background-color:#e63946">立即团购</view>
          </view>
        </view>

      </view>
    </up-popup>
  </view>
</template>
<script>
import {goodsListInfo, goodsListNew} from "../../Api/shop";
export default {
  name: "index",
  data(){
    return{
      tabsIndex:1,
      isSubscribing:false,
      list:[],
      tabs:[],
      tableList:[],
      show:false,
      additem:{
        image:[]
      }
    }
  },
  methods:{
    close(){
      this.show = false
    },
    addTabs(e){
      this.tabsIndex = e
      this.getListInfo(e)
    },
    xxdy(){

      let temp_id = 'tzQeCgd-K7wq6_723vTfa4YBQ4rw1Q_iBctEZgfyVS8'
      uni.requestSubscribeMessage({
        tmplIds: [temp_id],// TEMPLATE_ID替换为选用的模版id
        success(res) {
          // uni.hideLoading()
          if (res[temp_id] === 'accept') {
            uni.showToast({
              title: '订阅成功',
              icon: 'success',
            })
          }
        },
        fail() {
          uni.showToast({
            title: '订阅失败',
            icon: 'error',
          })
        },
        complete: () => {
          this.isSubscribing = false
        },
      })
    },
    addKillShow(e){
      this.additem = e
      this.additem.amount = 1
      this.show = true
    },
    // 添加/删除购物车的按钮事件
    valChange(e){
      this.additem.amount = e.value
    },
    // 团购
    killShop(e){
      let data = {
        amount:this.additem.amount,
        act_id:this.additem.acts_id,
        checked:true,
        goods:this.additem.goods_info,
        goods_id:this.additem.goods_info.id
      }
      console.log(1111,data)
      data.goods.price = this.additem.act_price
      let list = encodeURIComponent(JSON.stringify([data]))
      uni.navigateTo({
        url:'/porder/orderPay/index?list='+list
      })
    },
    //前往商品详情
    addDetail(e){
      console.log(e)
      const params = { id:e.goods_info.id}; // 待传递的参数
      uni.navigateTo({
        url: `/shophome/itemshopDetail/index?id=${params.id}&act_id=${this.tabsIndex}`
      });
    },
    onShareAppMessage(e) {
      console.log("分享了",e)
      //1.分享微信
      // const params = { id:e.goods_info.id}; // 待传递的参数
      // return {
      //   title: `快来参加：${e.goods_info.name}`,
      //   path: `/shophome/shopDetail/index?id=${params.id}`,
      //   imageUrl: e.goods_info.image[0]
      // };
    },
    // 活动列表
    getList(){
       goodsListNew({get_type:4}).then(res=>{
         this.tabs = res.data
         this.tabsIndex = res.data[0].id
         this.getListInfo(res.data[0].id)
       })
     },
    // 获取团购列表
    getListInfo(e){
      goodsListNew({get_type:4}).then(res=>{
        console.log("团购活动列表",res)
        this.tabs = res.data
        goodsListInfo({
          id:e,
          get_type:4
        }).then(res=>{
          this.list = res.data
          console.log("团购商品",res)
        })
      })
    }
  },
  onShow(){
  },
  onLoad(){
    this.getList()
  },
  //1.分享微信
  onShareAppMessage() {
    return{
      title:'鲜到家族云享集市',
      path: `/pagesList/itembuy/index`
    }
  },
  //2.配置分享到朋友圈
  onShareTimeline(){
    return{
      title: '鲜到家族云享集市',                //分享的标题
      query: '/pagesList/itembuy/index',     //点击分享链接之后进入的页面路径
      imageUrl: '/static/img/logo.jpg' //分享发送的链接图片地址
    }
  }
}
</script>
<style scoped lang="scss">
.tg_1{
  background-image: url("../../pagesList/img/tg_bg_1.png");
  background-size: 100% 100%;
  font-weight: bold;
  color: #131314;
}
.tg_2{
  background-image: url("../../pagesList/img/tg_bg_2.png");
  background-size: 100% 100%;
  font-weight: bold;
  color: #131314;
}
.ljdy{
  background-image: url("../../pagesList/img/ljdy.png");
  background-size: 100% 100%;
}

</style>
